import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// svg 直接引用作为组件
import svgr from 'vite-plugin-svgr';
import path from 'path'
//import reactSwc from "@vitejs/plugin-react-swc"; reactSwc到底是做什么的
// antd组件样式自动导入
import vitePluginImp from 'vite-plugin-imp'
// Vite 打包 问题 -- 打包完成后能直接打开 index.html 不需要启动服务
import { viteSingleFile } from "vite-plugin-singlefile"
// gzip静态资源压缩
import viteCompression from 'vite-plugin-compression'
// IE和旧版chrome兼容
import legacyPlugin from '@vitejs/plugin-legacy'
// 替换热更新，在文件更改时重新加载浏览器
import FullReload from 'vite-plugin-full-reload'
import eslintPlugin from "vite-plugin-eslint";
import postcssPxToViewport from 'postcss-px-to-viewport'

// https://vitejs.dev/config/
export default defineConfig(() => {
  return {
    plugins: [
      eslintPlugin({
        include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.jsx', 'src/**/*.ts'],
        exclude: ['./node_modules/**'],
        cache: false // eslint 缓存关闭 如果开启控制台报错 Internal server error: Cannot find module '@umijs/fabric' 大概率是没有关闭缓存
      }),
      react(),
      svgr(),
      legacyPlugin({
        targets: ['chrome 52'],// 需要兼容的目标列表，可以设置多个
        additionalLegacyPolyfills: ['regenerator-runtime/runtime']// 面向IE11时需要此插件
      }),
      // viteSingleFile(),
      // viteCompression({
      //     verbose: true,
      //     disable: false,
      //     threshold: 10240,
      //     algorithm: 'gzip',
      //     ext: '.gz',
      // }),
      // createSvgIconsPlugin({
      //   // 指定需要缓存的图标文件夹
      //   iconDirs: [path.resolve(process.cwd(), 'src/assets')],
      //   // 指定symbolId格式
      //   symbolId: '[name]',
      // }),
      // FullReload(
      //     // **: 可能代表文件夹，*：可能代表单个文件
      //     [
      //         'src/redux/**',
      //         'src/routes/**',
      //         'src/views/Modules/**',
      //     ], 
      //     { always: false }
      // ),
    ],
    publicDir: 'public',
    sourcemap: true,
    resolve: {
      alias:{
        '@':path.resolve(__dirname,'src')
      },
      extensions:['.js','.jsx', '.ts', '.tsx', '.json'] //导入时想要忽略的扩展名列表
    },
    css: {
      modules: { //配置 CSS modules 的行为。选项将被传递给 postcss-modules。
        scopeBehaviour: 'global' | 'local',
        // ...
      },
      // postcss: { // 内联的 PostCSS 配置 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源
      //   plugins: [
      //     // viewport 布局适配
      //     postcssPxToViewport({
      //       viewportWidth: 375
      //     })
      //   ]
      // },
      preprocessorOptions: { // css的预处理器选项
        scss: {
          additionalData: `@import '/styles/index.scss';`
          // additionalData: `$injectedColor: orange;` // scss 全局变量 也可以直接引入 `@import '/src/assets/styles/variables.scss';`
        }
      }
    },
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
      terserOptions: {
        compress: {
          // 生产环境时移除console
          drop_console: true,
          drop_debugger: true,
        },
      },
      cssCodeSplit: false,// css代码分离
		// assetsInlineLimit: 100000000,// 超大静态资源警告门槛，单位KB (97656.25MB)
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          manualChunks(id) { // 静态资源分拆打包
            if (id.includes('node_modules')) {
                return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          }
        }
      }
    },
    server: {
      proxy: {
        // 字符串简写写法
        '/foo': 'http://localhost:4567',
        // 选项写法
        '/api': {
          target: 'http://jsonplaceholder.typicode.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
        // 正则表达式写法
        '^/fallback/.*': {
          target: 'http://jsonplaceholder.typicode.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/fallback/, '')
        },
        // 使用 proxy 实例
        // '/api': {
        //   target: 'http://jsonplaceholder.typicode.com',
        //   changeOrigin: true,
        //   configure: (proxy, options) => {
        //     // proxy 是 'http-proxy' 的实例
        //   }
        // },
        // Proxying websockets or socket.io
        '/socket.io': {
          target: 'ws://localhost:3000',
          ws: true
        }
      }
    }
  }
})
